<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>乐扣游戏商城</title>
  <link rel="shortcut icon" href="favicon.ico" />
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/carousel.css">
  <link rel="stylesheet" href="css/swiper-bundle.min.css">
  <script src="js/swiper-bundle.min.js"></script>

</head>

<body>
  <!-- header模块-->
  <header>
    <div class="header-l">
      <a href="index.html">
        <img src="images/logo.png" alt="">
      </a>
    </div>
    <div class="header-r">
      <ul>
        <li class="first">
          <a href="shopcar.html">购物车</a>
        </li>
        <li>
          <a href="index.html">商店</a>
        </li>
        <li>
          <a href="community.html">社区</a>
        </li>
        <li>
          <a href="ranking.html">排行榜</a>
        </li>
        <li>
          <a href="javascript:;">客服</a>
        </li>
      </ul>
    </div>
    <div class="header-m">
      <a href="register.html"><button>注 册</button></a>

      <a href="login.html"><button>登 录</button></a>
    </div>
  </header>

  <div class="empty">

  </div>

  <!-- 主体模块 -->
  <div class="tab w">
    <div class="wish">
      <ul>
        <li>
          <a href="javascript:;">愿望单(2)</a>
        </li>
      </ul>
    </div>
    <div class="tab_list">
      <ul>
        <li>
          <a href="javascript:;">您的商店</a>
        </li>
        <li>
          <a href="javascript:;">新鲜推荐</a>
        </li>
        <li>
          <a href="javascript:;">类别</a>
        </li>
        <li>
          <a href="javascript:;">点数商店</a>
        </li>
        <li>
          <a href="javascript:;">新闻</a>
        </li>
        <li>
          <a href="javascript:;">实验室</a>
        </li>
        <li class="last">
          <input type="text" placeholder="消失的光芒"><button>搜索</button>
        </li>
      </ul>
    </div>
  </div>

  <!-- 精选 -->

  <div class="swiper">
    <div class="promo_t">
      <p>精选和推荐</p>
    </div>
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="update/pro-1.png" alt=""></div>
      <div class="swiper-slide"><img src="update/pro-2.png" alt=""></div>
      <div class="swiper-slide"><img src="update/pro-3.png" alt=""></div>
      <div class="swiper-slide"><img src="update/pro-4.png" alt=""></div>
      <div class="swiper-slide"><img src="update/pro-5.png" alt=""></div>
    </div>

    <!-- 分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

  </div>

  <!-- 特别优惠 -->
  <div class="low-price w">
    <div class="low_t">
      <p>特别优惠</p>
      <a href="Javascript:;">浏览更多</a>
    </div>
    <div class="low_g">
      <div class="good1" style="margin-left:0 ;">
        <a href="javascript:;">
          <img src="update/good1.png" alt="">
        </a>
      </div>
      <div>
        <a href="javascript:;">
          <img src="update/good2.png" alt="">
        </a>
      </div>
      <div>
        <a href="javascript:;">
          <img src="update/good3.png" alt="">
        </a>
      </div>
    </div>
  </div>

  <!-- 类型 -->
  <div class="type w">
    <div class="type_t">
      <p>按类型及其他方式浏览</p>
    </div>
    <div class="type_g">
      <ul>
        <li class="first">
          <a href="javascript:;">
            <img src="update/type-1.png" alt="">
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="update/type-2.png" alt="">
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="update/type-3.png" alt="">
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="update/type-4.png" alt="">
          </a>
        </li>
      </ul>
    </div>
  </div>

  <!-- 猜你喜欢 -->
  <div class="like w">
    <div class="like_t">
      <p>像您一样的玩家喜欢</p>
      <p class="second">基于您玩过的游戏</p>
      <a href="javascript:;">探索与自定义</a>
    </div>
    <div class="like_g">
      <ul>
        <li class="first">
          <a href="javascript:;">
            <img src="update/like-1.png" alt="">
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="update/like-2.png" alt="">
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="update/like-3.png" alt="">
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="update/like-4.png" alt="">
          </a>
        </li>
        
      </ul>
    </div>
  </div>

  <!-- tab栏 -->
  <div class="choice w">
    <div class="choice_list">
      <ul>
        <li class="current">新品与热门商品</li>
        <li>热销商品</li>
        <li>热门即将退出</li>
        <li>优惠</li>
      </ul>
    </div>
    <div class="choice_con">
      <div class="item" style="display: block;">
        <ul>
          <li class="first">
            <img src="update/item-1.png" alt="">
          </li>
          <li>
            <img src="update/item-1.png" alt="">
          </li>
          <li>
            <img src="update/item-1.png" alt="">
          </li>
          <li>
            <img src="update/item-1.png" alt="">
          </li>
          <li>
            <img src="update/item-1.png" alt="">
          </li>
          <li>
            <img src="update/item-1.png" alt="">
          </li>
          <li>
            <img src="update/item-1.png" alt="">
          </li>
        </ul>
      </div>
      <div class="item">
        热销商品
      </div>
      <div class="item">
        热门即将退出
      </div>
      <div class="item">
        优惠
      </div>
    </div>
    <div class="item_l">
      <img src="update/item-l.png" alt="">
    </div>
  </div>

  <!--更多目录模块 -->
  <div class="more w">
    <div class="more_l">
      <a href="javascript:;">
        <img src="update/mulu.png" alt="">
      </a>
    </div>
    <h2>浏览完整目录</h2>
    <p>通过按照类型、要素、价格以及更多检索要素，来找到你的下一款最爱游戏。</p>
    <button>了解详情</button>
  </div>

  <div class="message w">
      下拉获取更多游戏信息
  </div>

  <!-- 底部模块 -->
  <footer>
    <div class="mod_copyright">
      <div class="links">
        <a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | <a href="#">商家入驻</a> | <a href="#">营销中心</a>
        |
        <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <a href="#">游戏社区</a> |<a href="#">爱心公益</a>|
        <a href="#">English Site</a> | <a href="#">Contact U</a>
      </div>
      <div class="copyright">
        地址：嘉应学院江北校区东区学生宿舍  电话：13434940752 邮箱: 1960144768@qq.com <br>
      </div>
    </div>
  </footer>

  <script>
    // 获取元素
    var choice_list = document.querySelector('.choice_list');
    var lis = choice_list.querySelectorAll('li');
    var items = document.querySelectorAll('.item');
    // for循环绑定点击事件
    for (var i = 0; i < lis.length; i++) {
      // 开始给5个小li 设置索引号 
      lis[i].setAttribute('index', i);
      lis[i].onclick = function () {
        // 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式

        // 干掉所有人 其余的li清除 class 这个类
        for (var i = 0; i < lis.length; i++) {
          lis[i].className = '';
        }
        // 留下我自己 
        this.className = 'current';
        // 2. 下面的显示内容模块
        var index = this.getAttribute('index');
        console.log(index);
        // 干掉所有人 让其余的item 这些div 隐藏
        for (var i = 0; i < items.length; i++) {
          items[i].style.display = 'none';
        }
        // 留下我自己 让对应的item 显示出来
        items[index].style.display = 'block';
      }
    }

    var mySwiper = new Swiper('.swiper', {
      direction: 'horizontal', // 垂直切换选项
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

      //自动播放
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
      },
    })        
  </script>
</body>

</html>